﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.ExamItems.IndexModel
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "检查项目管理";
}
@await Component.InvokeAsync("TreeSelectorWidget")
@section styles
{
    <abp-style src="/Pages/ExamItems/Index.css"></abp-style>
}
@section scripts
{
    <abp-script src="/Pages/ExamItems/Index.cshtml.js"></abp-script>
}
<div class="content-container">
    <div id="app">
        <div class="title-container">
            <div>
                <span>{{department?department.name:''}}.{{deviceType?deviceType.name:''}}</span>
            </div>
        </div>
        <el-row>
            <el-col :span="23">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="showCreate" icon="el-icon-plus" size="mini" v-if="examItemAddPermission">新建项目</el-button>
                    <el-button v-on:click="showCreateDir" icon="fa fa-folder-plus" size="mini" v-if="examItemAddPermission">新建目录</el-button>
                    <el-input v-model.trim="filterName" placeholder="用户名" size="mini" style="width:300px;margin-left:10px" clearable></el-input>
                    <el-button type="primary" v-on:click="loadExamItemList" icon="el-icon-search" size="mini">搜索</el-button>
                    <el-button v-on:click="deleteMany" icon="el-icon-user-solid" size="mini" v-if="examItemDeletePermission">删除</el-button>
                    <el-button v-if="examItemSyncDataPermission" v-on:click="syncData" icon="el-icon-user-solid" size="mini">同步</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="loadTableData" icon="el-icon-refresh" size="mini"></el-button>
                </div>
            </el-col>
        </el-row>
        <hr class="line-gray" />
        <div class="container-body">
            <div class="nav-container">
                <el-tree :data="treeData" :props="defaultProps" default-expand-all :highlight-current="true" :expand-on-click-node="false" v-on:node-click="nodeClicked" node-key="id">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i :class="data.icon"></i>
                        <a>
                            <cite>{{node.label }}</cite>
                        </a>
                    </span>
                </el-tree>
            </div>
            <div class="table-container">
                <el-table :data="tableData" height="500" size="mini" class="el-table" row-key="id" ref="examItemTable" v-show="department && deviceType" v-on:selection-change="selectionExamItemChange" :select-on-indeterminate="true" default-expand-all :indent="20" :highlight-selection-row="true">
                    <el-table-column type="selection">

                    </el-table-column>
                    <el-table-column align="left" width="65">
                        <template slot-scope="scope">
                            <div style="display:flex;flex-direction:row;">
                                <div>
                                    <i :class="scope.row.icon"></i>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" width="280" property="name">

                    </el-table-column>
                    <el-table-column label="编码" align="center" width="100" property="outerCode">

                    </el-table-column>
                    <el-table-column label="目录">
                        <template slot-scope="scope">
                            <el-checkbox :checked="scope.row.isDirectory" :key="scope.row.id" disabled></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column label="工作量" align="center" v-if="showWorkLoad" width="100" property="workload">

                    </el-table-column>
                    <el-table-column label="活动" align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isActive"
                                       disabled>
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="优先级" property="order" align="center">

                    </el-table-column>
                    <el-table-column label="操作" width="200" property="type">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-edit" v-on:click="showEdit(scope.row.id)" v-if="examItemEditPermission"></el-button>
                            <el-button size="mini" icon="el-icon-delete" type="danger" v-on:click="deleteExamItem(scope.row.id)" v-if="examItemDeletePermission"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-show="department && deviceType"
                               v-on:size-change="pageSizeChange"
                               v-on:current-change="currentPageChange"
                               :current-page="currentPage"
                               :page-sizes="[10, 15, 20, 30,40,50,100]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="totalCount">
                </el-pagination>
                <div v-show="!department" class="no-department">
                    <span>系统中还没配置任何科室！！</span>
                </div>
                <div v-show="department && !deviceType" class="no-device-type">
                    <span>还未配置科室设备类型！！</span>
                </div>
            </div>
        </div>

        <!--创建与编辑对话框-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="700px" v-on:close="resetForm" :close-on-click-modal="false">
            <el-form :model="examItem" :label-width="formLabelWidth" ref="dialogForm" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model.trim="examItem.name" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="父级">
                                <tree-selector :dialog-visible="dialogVisible" :current-name="examItem.parentName" :current-id="examItem.parentId" :dep-id="department?department.id:null" :device-type-id="deviceType?deviceType.id:null" v-on:parent-selected-change="parentSetectedChange">
                                </tree-selector>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="编码" prop="outerCode">
                                <el-input v-model.trim.timer="examItem.outerCode" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="showWorkLoad">
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="工作量" prop="workload">
                                <el-input-number v-model.trim.timer="examItem.workload" :step="0.5" :max="10" size="mini" autocomplete="off" clearable></el-input-number>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="设备类型" prop="deviceTypeId">
                                <el-select size="mini" v-model="examItem.deviceTypeId" placeholder="请选择" v-on:change="deviceTypeChangeHandler" disabled >
                                    <el-option v-for="item in deviceTypeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>

                </el-row>
                <el-row v-if="showApplicableSex">
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="适用性别">
                                <el-select size="mini" v-model="examItem.applicableSex" placeholder="请选择">
                                    <el-option v-for="item in applicableSexOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="顺序" prop="order">
                                <el-input type="number" step="1" v-model="examItem.order" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="!examItem.isDirectory">
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="检查设备" prop="order">
                                <el-select size="mini" v-model="examItem.devices" multiple placeholder="请选择" clearable>
                                    <el-option v-for="item in deviceOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="!examItem.isDirectory">
                    <el-col :span="4" >
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="时间段">
                                <el-switch v-model="examItem.requireInterval">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="20" v-if="examItem.requireInterval">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item prop="timeInterval">
                                <el-time-select placeholder="起始时间"
                                                v-model="examItem.startTime"
                                                size="mini"
                                                :picker-options="{
                                                  start: '00:00',
                                                  step: '00:15',
                                                  end: '24:00'
                                                }">
                                </el-time-select>
                                <el-time-select placeholder="结束时间"
                                                size="mini"
                                                v-model="examItem.endTime"
                                                :picker-options="{
                                                  start: '00:00',
                                                  step: '00:15',
                                                  end: '24:30',
                                                  minTime: examItem.startTime
                                                }">
                                </el-time-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="活动">
                                <el-switch v-model="examItem.isActive">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="save" size="mini">保存</el-button>
                <el-button v-on:click="resetForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</div>